@import '../../style/variables/theme.less';
body, 
.error, 
.container-floud, 
.container-floud>div {
    height: 100%;
}
.error {
    .clip {
        display:inline-block;
        transform:skew(-45deg);
        .shadow {
            height: 180px;
            overflow:hidden;
        }
        &:nth-of-type(2) {
            .shadow {
                width:130px;
                overflow:hidden;
                position:relative;
                box-shadow:inset 20px 0px 20px -15px rgba(150,150,150,0.8),20px 0px 20px -15px rgba(150,150,150,0.8);
            }
            .digit {
                left:-10%;
            }
        }
        &:nth-of-type(1),
        &:nth-of-type(3) {
            .shadow {
                width: 250px;
                &:after {
                    content:"";
                    position:absolute;
                    right:-8px;
                    bottom:0px;
                    z-index:9999;
                    height:100%;
                    width:10px;
                    background:linear-gradient(90deg,transparent,rgba(173,173,173,0.8),transparent);
                    border-radius:50%;
                }
            }
            .digit {
                right:-20%;
            }
        }
        &:nth-of-type(3) {
            .shadow {
                &:after {
                    left:-8px;
                }
            }
            .digit {
                left:-20%;
            }
        }
    }
    .digit {
        width: 150px;
        height: 150px;
        line-height: 150px;
        font-size: 120px;
        font-weight: bold;
        position:relative;
        top:8%;
        color:white;
        background:#1aa094;
        border-radius:50%;
        display:inline-block;
        transform:skew(45deg);
    }
    h2 {
        // font-size:32px;
        font-size:24px;
        color:#A2A2A2;
        font-weight:bold;
        padding-bottom:20px;
    }
    .tohome {
        font-size:16px;
        color:#07B3F9;
    }
    .msg {
        top: -190px;
        left: 30%;
        width: 80px;
        height: 80px;
        line-height: 80px;
        font-size: 32px;
        position:relative;
        z-index:9999;
        display:block;
        background:#535353;
        color:#A2A2A2;
        border-radius:50%;
        font-style:italic;
    }
    .triangle {
        position:absolute;
        z-index:999;
        transform:rotate(45deg);
        content:"";
        width:0;
        height:0;
    }
    span {
        &.triangle {
            top:70%;
            right:0%;
            border-left:20px solid #535353;
            border-top:15px solid transparent;
            border-bottom:15px solid transparent;
        }
    }
    .container-error-404 {
        position:relative;
        height:250px;
        transform: translateY(40%);
    }
}

@media(max-width:767px) {
    .error {
        .clip {
            .shadow {
                height:100px;
            }
            &:nth-of-type(2) {
                .shadow {
                    height:80px;
                }
            }
            &:nth-of-type(1)
            &:nth-of-type(3) {
                .shadow {
                    height:100px;
                }
            }
        }
        .digit {
            width:80px;
            height:80px;
            line-height:80px;
            font-size:52px;
        }
        h2 {
            font-size:18px;
        }
        .msg {
            top:-110px;
            left:15%;
            width:40px;
            height:40px;
            line-height:40px;
            font-size:18px;
        }
        span {
            &.triangle {
                top:70%;
                right:-3%;
                border-left:10px solid #535353;
                border-top:8px solid transparent;
                border-bottom:8px solid transparent;
            }
        }
        .container-error-404 {
            height:150px;
        }
    }
}

.theme-loop(@list,@i:1,@val:extract(@list,@i)) when (length(@theme-name-list)>=@i){
    @headerBgColor: extract(@theme-header-bg-color-list, @i);
    .error-@{val}{
        .digit {
            background-color: @headerBgColor;
        }
    }
    .theme-loop(@theme-name-list,(@i+1));
}
.theme-loop(@theme-name-list);